http和浏览器的工作原理和内部机制要巩固一下,特别是涉及到性能、进程线程、同步异步什么的
1 关于React特点
声明式开发
减少大量dom操作代码量
可以和其他框架并存
react只去管理id=”root”的div的渲染。jQuery可以管理其他div操作。
组件化
- 区分组件
和标签 xxx - 组件之间通信:父向子:属性,接收用props。子向父:调用父组件的方法
单向数据流
父组件可以向子组件传值(只读),子组件不能去改变这个值。
why单项数据流:防止其中一个改变时出现bug,难以定位是哪一个组件改变导致的错误。
视图层框架
只解决数据和渲染的问题,不解决react复杂传值问题,可以借助其他redux等数据传递框架
函数式编程
代码逻辑清晰:拆分函数,各司其职;
前端自动化测试便捷:只需要给函数一个数值,查看输出是否符合预期。
3 Redux知识点
Redux设计和使用的三大原则
- store是唯一的
- 只有store只有自己能够改变自己的内容
Redux的核心API
- createStore 创建store
- store.dispatch 派发action,传递给store
- store.getState 获取store中所有数据内容
- store.subscribe 订阅store的改变。只要store改变,其接收的回调函数就会被执行
Redux中间件
在action和store之间。
对store的dispatch方法的封装、升级。根据参数不同,执行不同的操作。
- 原始:接收对象后,将对象直接传递给store。
- 升级后:传递对象和之前一样;传递函数,不会直接传递,而是先执行,执行完后,若需要调用store,该函数内再调用store。
- 例子:
- redux-logger中间件,在传递过程中,将action打印。
- redux-thunk异步问题:将异步放在actionCreator中
- redux-saga异步问题:将异步单独放在文件中
React-Redux
Redux的官方React绑定库
使react组件从redux store中读取数据,并且向store分发actions来更新数据。
提供:Provider组件:核心组件,把store提供给每一个内部组件,也叫提供器
功能:从最外部封装了整个应用,并向connect模块传递store。
连接: connect方法,前两个参数为连接的规则,最后的参数为本组件TodoList。
mapStateToProps:store里的数据、和组件里的数据关系关联(组件获取store数据)
mapDispatchToProps:组件里props如何对store里的数据做修改、和store里的dispatch方法做关联。(组件通过dispatch修改store)
// 实际上:todoList是一个UI组件,connect把UI组件和业务逻辑(数据、派发)结合,返回的结果为一个容器组件。
// 导出的内容就是connect的执行结果:容器组件
前端知识
构建工具
webpack